<template>
  <div>
    <el-card>
      <h4>房屋信息</h4>
      <div style="width: 100%; margin-top: 20px">
        <el-form :model="inputForm" :rules="rules" ref="dataForm">
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="房产类型："
                prop="buildingType"
                label-width="140px"
              >
                <el-select
                  @change="getSysProjectType()"
                  v-model="inputForm.buildingType"
                  placeholder="请选择"
                  style="width: 70%"
                >
                  <el-option
                    v-for="item in proBuildTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="房产性质："
                label-width="140px"
                prop="projectProperty"
              >
                <el-select
                  v-model="inputForm.projectProperty"
                  placeholder="请选择"
                  style="width: 70%"
                >
                  <el-option
                    v-for="item in projectPropertyList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="房产编号："
                label-width="140px"
                prop="projectName"
              >
                <el-input
                  v-model="inputForm.projectName"
                  placeholder="请输入房产编号"
                  style="width: 70%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="房产区域："
                prop="projectTypeId"
                label-width="140px"
              >
                <el-select
                  v-model="inputForm.projectRegionStage"
                  placeholder="请选择"
                  style="width: 70%; margin-right: 10%"
                >
                  <el-option
                    v-for="item in projectUnitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
           <!--  去掉多余的下拉框    <el-select
                  v-model="inputForm.projectRegionId"
                  placeholder="请选择"
                  style="width: 30%"
                >
                  <el-option
                    v-for="item in projectUnitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="楼层："
                prop="projectFloorNumber"
                label-width="140px"
              >
                <el-input
                  v-model="inputForm.projectFloorNumber"
                  style="width: 70%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="房号："
                prop="projectNumber"
                label-width="140px"
              >
                <el-input
                  v-model="inputForm.projectNumber"
                  style="width: 70%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="面积(㎡)："
                prop="projectArea"
                label-width="140px"
              >
                <el-input
                  v-model="inputForm.projectArea"
                  style="width: 70%"
                  placeholder="请输入面积"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="租金单价："
                prop="projectUnitPrice"
                label-width="140px"
              >
                <el-input
                  v-model="inputForm.projectUnitPrice"
                  style="width: 70%"
                  placeholder="请输入租金单价"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="租期类型："
                prop="remarks"
                label-width="140px"
              >
                <el-select v-model="inputForm.rentType" style="width: 70%">
                  <el-option
                    v-for="item in renttyp"
                    :key="item.value"
                    :label="item.laber"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="上传户型图:" label-width="140px">
                <el-upload
                  class="upload-demo"
                  action=""
                  :auto-upload="false"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :on-exceed="handleExceed"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    支持扩展名：jpg.png....
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="房产状态："
                prop="remarks"
                label-width="140px"
              >
                <el-select
                  v-if="inputForm.ctContract"
                  v-model="inputForm.projectStatus"
                  style="width: 70%"
                >
                  <el-option
                    v-for="item in proStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联合同：" label-width="140px">
                <el-input
                  v-model="inputForm.contractNumber"
                  style="width: 70%"
                  placeholder="请输入合同编号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- <div class="bottom" style="width:100%">
            <el-button type="primary">提交</el-button>
          <el-button>取消</el-button>
       </div> -->
        <div class="bottom" style="width: 100%" slot="footer">
          <el-button
            type="primary"
            @click="dataFormSubmit"
            icon="el-icon-circle-check"
            >提 交</el-button
          >
          <el-button icon="el-icon-circle-close" @click="canse">取 消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  getProjectType,
  getProjectStatus,
  getProjectpProperty,
  getContractList,
  addHouse,
} from "@/api/market/estate/rmproject";
import { getDicType } from "@/api/common";
export default {
  data() {
    return {
      proStatusList: [], //房产状态
      projectPropertyList: [], //房产性质
      proBuildTypeList: [], //获取房产类型
      proContractList: [], //获取关联合同数据
      projectUnitList: [], //房产楼号/区域绑定数据
      renttyp: [
        {
          laber: "短租",
          value: "1",
        },
        {
          laber: "长租",
          value: "2",
        },
      ],

      inputForm: {
        projectStatus: "1", // 房产状态
        projectArea: "", //房产面积
        projectName: "", //房屋编号
        projectFloorNumber: "", // 楼层
        projectRegionStage: "", ////期数/房屋区域
        //projectRegionId: "", //楼号-区/房屋区域
        buildingType: "", //房产类型
        projectUnitPrice: "", // 租金单价
        projectProperty: null, //房产性质

        projectNumber: "", //房屋编号
        projectImage: "", // 房屋照片
        contractNumber: "", //关联合同编号
        rentType: "", //租期类型 1短租 2 长期

        ctContract: {
          id: "",
          contractNumber: "",
        },
        ctContractProjectList: null,
        sysProjectType: {
          id: "",
          typeName: "",
        },
      },
      /* 表单验证 */
      rules: {
        projectname: [
          { required: true, message: "房产编号不能为空", trigger: "blur" },
        ],
        projectProperty: [
          { required: true, message: "房产性质不能为空", trigger: "blur" },
        ],
        buildingType: [
          { required: true, message: "房产类型不能为空", trigger: "blur" },
        ],
        projectTypeId: [
          { required: true, message: "房产楼号/区域不能为空", trigger: "blur" },
        ],
        /*   projectFloorNumber: [
             { required: true, message: "楼层不能为空", trigger: "blur" }
           ],*/
        projectName: [
          { required: true, message: "房屋编号不能为空", trigger: "blur" },
        ],
        projectArea: [
          { required: true, message: "请输入面积", trigger: "blur" },
        ],
        projectStatus: [
          { required: true, message: "房产状态不能为空", trigger: "blur" },
        ],
        projectFloorNumber: [
          { required: true, message: "房屋楼层不能为空", trigger: "blur" },
        ],
        projectNumber: [
          { required: true, message: "房号不能为空", trigger: "blur" },
        ],
        renprojectUnitPricepay: [
          { required: true, message: "房屋租金单价不能为空", trigger: "blur" },
        ],
        remarks: [
          { required: true, message: "房屋租期类型不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    //房产状态
    getProjectStatus().then((response) => {
      if (response.data != null) {
        this.proStatusList = response.data.data;
        this.inputForm.projectStatus = this.proStatusList[1].value;
        console.log(this.proStatusList, "房产状态");
      }
    });

    //房产性质
    getProjectpProperty().then((response) => {
      if (response.data != null) {
        this.projectPropertyList = response.data.data;
        console.log(this.projectPropertyList, "房产性质2");
      }
    });

    //获取房产类型
    getProjectType().then((response) => {
      if (response.data != null) {
        this.proBuildTypeList = response.data.data;
        console.log(this.proBuildTypeList, "获取房产类型");
      }
    });

    //获取关联合同数据
    getContractList().then((response) => {
      if (response.data != null) {
        this.proContractList = response.data.data;
        console.log(this.proContractList, "获取关联合同数据");
      }
    });
  },
  methods: {
    /* 取消按钮 */
    canse(){
      this.$router.back()
    },
    /* 图片 */
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    /* 图片上传 */
    handlePreview(file) {
      console.log(file);
    },
    /* 图片上传 */
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    /* 图片上传 */
    beforeRemove(file, fileList) {
      console.log(fileList, file);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getSysProjectType() {
      if (this.inputForm.buildingType != "") {
        getDicType(this.inputForm.buildingType).then((response) => {
          if (response.data != null) {
            this.projectUnitList = response.data.data;
            console.log(this.projectUnitList, "00000000");
          }
        });
      }
    },
    dataFormSubmit() {
      addHouse(this.inputForm).then((data) => {
        if (data.data.code == 0) {
          this.$message.success('添加成功')
          console.log(data, "ok");
          //this.$router.back()
        }else{
          this.$message.error(data.data)
        }
      });
      /* 表单提交上线前优化*/
      //  this.$refs["dataForm"].validate((valid) => {
      //     if (valid) {
      //       if (this.form.id) {
      //         putObj(this.form).then((data) => {
      //           if (data.data.code == 0) {
      //             this.$message.success("修改成功");
      //             this.visible = false;
      //             this.$emit("refreshDataList");
      //           } else if (data.data.code == 2) {
      //             this.$alert(data.data.data, "错误提示", {
      //               confirmButtonText: "确定",
      //             });
      //           }
      //         });
      //       } else {
      //         addObj(this.form).then((data) => {
      //           if (data.data.code == 0) {
      //             this.$message.success("添加成功");
      //             this.visible = false;
      //             this.$emit("refreshDataList");
      //           } else if (data.data.code == 2) {
      //             this.$alert(data.data.data, "错误提示", {
      //               confirmButtonText: "确定",
      //             });
      //           }
      //         });
      //       }
      //     }
      //   });
    },
  },
};
</script>
<style lang="scss" scoped>
div {
  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
